<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				position: relative;
				width: 400px;
				height: 800;
				margin: 0px auto;
			}
			.box img{
				width: 100%;
			}
			#d1{
				width: 100px;
				height: 100px;
				position: absolute;
				top: 510px;
				left: 0px;
				border: none;
				opacity: 0;
			}
			#d2{
				width: 400px;
				height: 190px;
				border: none;
				color: white;
				background: black;
				text-align: right;
				font-size: 60px;
				position: absolute;
				top:20px;
				left: 0px;
			}
			#d3{
				width: 100px;
				height: 100px;
				position: absolute;
				top: 212px;
				left: 0px;
				border: none;
				opacity: 0;
			}
		</style>
	</head>
	<!--思考题：实用1.jpg，实现当单击1时，计算器结果区域显示1.-->
	<body>
		
		<div class="box">
			<img src="../image/bg.jpg" />
			<input id="d2" />
			<input type="button"  value="1" id="d1"/>
			<input type="button" value="c" onclick="qingChu()" id="d3" />
		</div>
		<script>
			d1.onclick=function(){
				d2.value=d2.value+"1";
			};
			var qingChu = function() {
				d2.value =  "";
			};
		</script>
	</body>
</html>
